import React, { Component } from 'react';
import { Form, Input, Select } from 'antd';
import './modal.css';
import PropTypes from 'prop-types'
import {reqOrganListByParentOrgid1,reqRoleList} from '../../api';
import { connect } from 'react-redux';
const { Option } = Select;

class AddUserForm extends Component {
    
  state = {
    organList:[],
    roleArray:[]
  }

  static propTypes = {
    setForm: PropTypes.func.isRequired
  }

  formRef = React.createRef();

  getOrganList = async() => {  // 获取用户权限内的全部组织
    const org_pid = this.props.user.org.org_id;
    this.setState({ loading: true })
    const result = await reqOrganListByParentOrgid1(org_pid);
    this.setState({loading: false});
    const organList = result.data;  
    this.setState({
      organList
    })
  }

  getRoleList = async() => {  // 获取全部角色
    const result = await reqRoleList();
    const roleInforList = result.data;
    var roleArray = Object.keys(roleInforList).map(function(el){
      return roleInforList[el];
    })
    console.log('an1',roleArray)
    this.setState({
     roleArray
    },() => console.log('an1',roleArray))
  }

  componentDidMount() {
    this.props.setForm(this.formRef);
    this.getOrganList();
    this.getRoleList();
  }

  render() {
    const layout = {
      labelCol: { span: 5 },
      wrapperCol: { span: 16 },
    };
    return (
      <div>
        <h1 className='title'>基本信息</h1>
        <Form 
          {...layout} 
          ref={this.formRef}   
          name="control-ref" 
          onFinish={this.onFinish}
        > 
          <Form.Item
            name="user_mobile"
            label="手机号码"
            rules={[{ required: true, message: '请输入手机号码!' }]}
          >
            <Input placeholder="请输入手机号码"/>
          </Form.Item>
             
          <Form.Item 
            name="user_name" 
            label="姓名" 
            rules={[{ required: true }]}
          >
            <Input placeholder="请输入用户姓名"/>
          </Form.Item>

          <Form.Item 
            name= "user_email" 
            label="邮箱" 
            rules={[{ required: true,type: 'email' }]}>
            <Input placeholder="请输入电子邮箱"/>
          </Form.Item>

          <Form.Item 
            name="user_role" 
            label="角色" 
            rules={[{ required: true }]}
          >
            <Select
              placeholder="请选择角色"
              allowClear
            >
              {this.state.roleArray.map((item) => <Option value={item.role_id}>{item.role_name_Zh}</Option>)}
            </Select>
          </Form.Item>

          <Form.Item 
            name="org_id" 
            label="所属组织" 
            rules={[{ required: true }]}
          >
            <Select
              placeholder="请选择所属组织"
              allowClear
            >
              {this.state.organArray.map((item) => <Option value={item.org_id}>{item.org_name}</Option>)}
            </Select>
          </Form.Item>

          <Form.Item name="user_remark" label="备注">
            <Input.TextArea />
          </Form.Item>

        </Form>
      </div>
      
    )
  }
}

export default connect(
  state => ({user: state.user}),
  {}
)(AddUserForm);